cl-component-translate

cl-component-translate

CrowdLab Translate Component

Components for translating text, numbers, dates and times.

Installation

$ yarn add cl-component-translate

Components

Translation Provider

Wraps the tree to provide the context for translations, wrapper for react-intl's IntlProvider

Usage:

import { TranslationProvider } from 'crowdlab-react-translations';

const locale = {
  tag: 'en',
  language: 'en-GB',
  translations: {
    test: 'translated'
  }
};

<TranslationProvider locale={locale}>
  <div>Children</div>
</TranslationProvider>

Translate

Wrapper for react-intl's FormattedMessage, does the nuts and bolts of the translating.

Usage:

import { Translate } from 'crowdlab-react-translations';

<Translate id="key.to.translate" />

Number

Wrapper for react-intl's FormattedNumber

Usage:

import { Number } from 'crowdlab-react-translations';

<Number number="5" style="percent" />

Relative Date

Relative data formatting, ie. 5 minutes ago, In 4 years time etc.

Usage:

import { RelativeDate } from 'crowdlab-react-translations';

<RelativeDate date="1989-10-28T18:08:40+00:00" />

Timestamp

Timestamp date time formatting. ie: October 28, 1989, 4:25 PM

Usage:

import { Timestamp } from 'crowdlab-react-translations';

<Timestamp date="1989-10-28T18:08:40+00:00" />

Helper functions

injectTranslationHelpers

Wrapper for react-intl's injectIntl, provides a translate() method to wrapper component The translate() method works much the same as the Translate component

Usage:

import { injectTranslationHelpers } from 'crowdlab-react-translations';

const Component = (translate) => {
  const translatedThing = translate({ id: 'test.key' });

  return <div data-t={translatedThing} />;
}

export default injectTranslationHelpers()(Component);

injectTranslations

This is used for testing react components that need access to Translate. Because translate needs context to offer translations. This uses the default translations but you can pass custom translations as an additional argument.

Usage:

import { injectTranslations } from 'crowdlab-react-translations';

test('something is translated', (t) => {
  const translations = {
    test: 'translated text'
  };

  const wrapper = mount(injectTranslations(<Component />, translations));

  t.is(wrapper.text(), 'translated text');
})